<template>
    <div id="nav" :class="{'fix-nav fix-nav-index': navBarFixed, 'nav nav-index': true}">
        <div class="content nav_conter">
            <!-- <div class="nav-logo flex">
                 <img src="@/assets/logo/logo-new.png" alt="" width="180">
             </div>-->
            <ul class="nav-left">
                <li class="active">
                    <router-link to="/enterprise">首页</router-link>
                </li>

                <span v-if="userType">
					<li v-if="userType != 'company'">
						<router-link to="/job"> 就业 </router-link>
					</li>
					<li v-if="userType != 'company'">
						<router-link to="/fieldwork"> 见习实习 </router-link>
					</li>
					<li v-if="userType == 'company'">
						<router-link to="/looking-for-talent"> 人才 </router-link>
					</li>
				</span>
                <span v-else>
					<li>
						<router-link to="/job"> 就业 </router-link>
					</li>
					<li>
						<router-link to="/fieldwork"> 见习实习 </router-link>
					</li>
					<li>
						<router-link to="/looking-for-talent"> 人才 </router-link>
					</li>
				</span>
                <li>
                    <router-link to="/service"> 服务联盟</router-link>
                </li>
                <li>
                    <router-link to="/policy"> 智慧政策</router-link>
                </li>
                <li>
                    <router-link to="/information"> 资讯中心</router-link>
                </li>
                <li>
                    <router-link to="/about"> 关于我们</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'NavIndex',
    data: function() {
        return {
            userType: this.$store.getters.userType,
            navBarFixed: false,
        }
    },
    created() {

    },
    mounted() {
        // 事件监听滚动条
        window.addEventListener('scroll', this.watchScroll)
    },
    destroyed() {
        // 移除事件监听
        window.removeEventListener('scroll', this.watchScroll)
    },
    methods: {
        watchScroll() {
            // 滚动的距离
            var scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;

            // 容器的高度
            var offsetTop = document.querySelector("#nav").offsetHeight;

            // console.log("scrollTop=>", scrollTop, "  offsetTop=>", offsetTop);

            //  滚动的距离如果大于了元素到顶部的距离时，实现吸顶效果
            if (scrollTop > offsetTop) {
                this.navBarFixed = true;
            } else {
                this.navBarFixed = false;
            }
        },
    }
}
</script>
<style lang="scss" scoped="scoped">
.nav-index {
    //background: #435772;
    background: url(/static/img/header.b6b03e79.png) no-repeat;
    width: 100%;
    min-width: 1200px;
    position: absolute;
    top: 68px;
    z-index: 999;

    .nav_conter {
        display: flex;
        width: 1200px;
        height: 60px;
        line-height: 60px;
        position: relative;
        margin-left: auto;
        margin-right: auto;

        .nav-logo {
            width: 138px;
            height: 31px;
            margin-top: 16px;
            margin-right: 56px;
            align-items: center;
            // justify-content: center;
            .logo-text {
                margin-left: 10px;
            }
        }

        .nav-left {
            margin: auto;

            li {
                font-size: 16px;
                display: inline-block;
                margin-left: 56px;

                a {
                    color: #B3C3D4;

                    &:hover {
                        color: #FFFFFF;
                    }
                }

                &.active {
                    a {
                        color: #FFFFFF;
                    }
                }
            }
        }
    }

}
</style>
